<template>
	<view>
		<view class="top-upper">
			<commonNavBar title="查看检查"   ></commonNavBar> 
			<view class="step">
				<view v-for="(tabs,index) in stepList" :key="index" @click="stepActive(index)">
					<view :class="{'active': tabIndex == index}">
						{{ tabs.step }}
					</view>
				</view>
			</view>
		</view>
		<view class="resultActiveContent" v-if=" tabIndex == 0">
			<view class="centre">
				<view class="one">
					<view class="title">
						<view class="left">检查结果示意图</view>
						<view class="right">单位：个</view>
					</view>
					<view class="content">
						<view class="echart">
							<view class="top">
								<EchartsCake class="EchartsCake" :options="chartOptions" :id="'EchartsCake'" />
							</view>
							<view class="bottom">
								<view class="list" v-for="(chartOptions,index) in chartOptions.data" :key="index">
									<view class="drop" :style="{ background: chartOptions.color }"></view>
									<text>{{ chartOptions.name }}</text>
								</view>
							</view>
						</view>
						<view class="ol">
							<view class="li" v-for="(chartOptions,index) in reversedData" :key="index"
								:style="{ background: chartOptions.background }">
								<view class="drop" :style="{ background: chartOptions.color }"></view>
								<text>{{ chartOptions.name }}:{{chartOptions.value}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="two">
					<view class="title">
						<view class="left">检查信息</view>
					</view>
					<view class="box">
						<view class="text">
							检查结果：<text>{{inspectionData.checkInfo == undefined ? '' : inspectionData.checkInfo.CHECK_RESULTS}}</text>
						</view>
						<view class="text">
							处理结果：<text>{{ inspectionData.checkInfo.PROCESS_RESULTS | resultFilter }}</text></view>
						<view class="text" v-if=" inspectionData.checkInfo.RECTIFICATION_TIME_LIMIT != null &&  inspectionData.checkInfo.RECTIFICATION_TIME_LIMIT != ''">
							整改完成期限：<text>{{ inspectionData.checkInfo.RECTIFICATION_TIME_LIMIT }}</text>
						</view>
						<view class="text">
							其他需要记录的问题：<text>{{ inspectionData.checkInfo.OTHER_PROBLEM == 'undefined' ? '' : inspectionData.checkInfo.OTHER_PROBLEM }}</text>
						</view>
					</view>
				</view>
				<view class="three">
					<view class="title">
						<view class="left">检查信息</view>
					</view>
					<view class="box">
					<!-- 	<view class="text">
							<text class="titles">日常监督检查要点表：</text>
							<image class="images" @tap="lookPhoto(baseUrl + inspectionData.checkInfo.CHECK_ITEM_TABLEURL)" :src="baseUrl + inspectionData.checkInfo.CHECK_ITEM_TABLEURL"></image>
						</view> -->
						<view class="text">
							<text class="titles">结果记录照片：</text>
							<image class="images" @tap="lookPhoto(baseUrl + inspectionData.checkInfo.RESULT_RECORD_URL)" :src="baseUrl + inspectionData.checkInfo.RESULT_RECORD_URL"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="resultBaseContent" v-if="tabIndex == 1">
			<view class="centre">
				<view class="one">
					<view class="title">
						<view class="left">监管单位信息</view>
					</view>
					<view class="box">
						<view class="text">监管单位：<text>{{ inspectionData.baseInfo.DEPT_NAME }}</text></view>
						<view class="text">检查时间：<text>{{ inspectionData.checkInfo.CHECK_TIME }}</text></view>
						<view class="text" v-for=" (user,index)  in userList">执法人员{{index+1}}：<text>{{ user.userName}}</text></view> 
					</view>
				</view>
				<view class="two">
					<view class="title">
						<view class="left">生产经营主体信息</view>
					</view>
					<view class="box">
						<view class="text">主体名称：<text>{{ inspectionData.baseInfo.COMPANY_NAME }}</text></view>
						<view class="text">经营地址：<text>{{ inspectionData.baseInfo.ADDRESS }}</text></view>
						<view class="text">负责人：<text>{{ inspectionData.baseInfo.CONTACT }}</text></view>
						<view class="text">联系方式：<text>{{ inspectionData.baseInfo.CONTACT_PHONE }}</text></view>
						<view class="text"
							:class="{'yes': inspectionData.checkInfo.MANAGE_STATUS == '0', 'no': inspectionData.checkInfo.MANAGE_STATUS != '0'}">
							经营状态：<text>{{ inspectionData.checkInfo.MANAGE_STATUS | manageStatusFilter }}</text></view>
					</view>
				</view>
				<view class="three">
					<view class="title">
						<view class="left">附件信息</view>
					</view>
					<view class="box">
						<!-- <view class="text">
							<text>门脸照片：</text>
							<image class="images" @tap="lookPhoto(baseUrl + inspectionData.checkInfo.COMANY_PIC)"  :src="baseUrl + inspectionData.checkInfo.COMANY_PIC"></image>
						</view> -->
						<view class="text">
							<text>告知页： </text>
							<image class="images" @tap="lookPhoto(baseUrl + inspectionData.checkInfo.INFORM_URL)"  :src="baseUrl + inspectionData.checkInfo.INFORM_URL"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="resultFoundationContent" v-if="tabIndex == 2">
			<view class="centre ">
				<view class="one">
					<view class="title">
						<view class="left">{{inspectionData.checkInfo.TEMPLATE_NAME}}</view>
					</view>
					<view class="box">
						<view class="text">
							<view class="li" v-for="(resultContentData, index) in inspectionData.standardList"
								@click="standardListActive(resultContentData.id, resultContentData.serialNum, resultContentData.name)">
								<view class="left">
									{{resultContentData.serialNum}}. {{  resultContentData.name}}
								</view>
								<view class="right">
									<view v-if="resultContentData.errorNum === 0">
										<image src="/static/img/yes.png" class="yes" />
									</view>
									<view v-else class="no">{{ resultContentData.errorNum }}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<uni-popup ref="standardListActive" type="bottom">
			<view class="standardListActiveContent" >
				<!-- <view class="title" style="position: fixed;">检查内容</view>
				<view class="box" style="padding-top: 90px;"> -->
				<view class="title">检查内容</view>
				<view class="box" :style="{maxHeight: popHeight + 'px'}">
					<view class="dl">
						<view class="dt">{{standardName}}</view>
						<view class="dd" v-for="(content,index) in contentList">
							<view class="top">
								<view class="left">
									<view class="number"><text v-if="content.importentItem === '2'">★</text></view>
									<view class="text">{{standardNumber}}.{{content.serialNum}} {{content.checkContent}}</view>
								</view>
								<view class="state yes" v-if="content.selection === '1'">
									<image src="../../static/img/yes2.png" mode=""></image>
									是
								</view> 
								<view class="state no"  v-if="content.selection === '2'">
									<image src="../../static/img/no2.png" mode=""></image>
									否
								</view>
								<view class="state yesS" v-if="content.selection === '3'">
									<image src="../../static/img/yes2.png" mode=""></image>
									合理缺项
								</view>
							</view>
							<view class="illustrate"   v-if="content.selection === '3'">
								<text>合理缺项</text>
								<view class="text">
									{{content.missingItemContent}}{{content.missingItemContentInput}}
								</view>
							</view>
							<view class="illustrate"   v-if="content.selection === '2'">
								<text>检查说明</text>
								<view class="text">
									{{content.problemContent}}{{content.problemContentInput}}
								</view>
							</view>
							<view class="photo"   v-if="content.selection === '2'">
								<text>问题照片</text>
								<view class="text" @tap="lookPhoto(baseUrl+ content.problemFile)">查看照片</view>
							</view>
						</view>
					</view>
				</view>
				<view class="closeReturn" @tap="closeReturn">关闭</view>
			</view>
		</uni-popup> 
	</view>
</template>

<script>
	import EchartsCake from '@/components/EchartsCake.vue';
	import commonNavBar from '@/components/CommonNavBar.vue';
	
	export default {
		components:{
			commonNavBar,
			EchartsCake,
		},
		data() {
			return {
				baseUrl: uni.$baseUrl,
				resultActiveId: '',
				popHeight:0, 
				standardNumber:0,
				standardName:'',
				contentList:[],
				inspectionData: {
					baseInfo: {},
					checkInfo: {},
				},
				tabIndex: 1,
				stepList: [{
					step: '检查结果',
					active: true
				}, {
					step: '基础信息',
					active: false
				}, {
					step: '检查内容',
					active: false
				}],
				chartOptions: {
					data: [{
						name: '合理缺项',
						value: 0,
						color: '#4C87FE',
						background: '#F1F6FF',
					}, {
						name: '不合格',
						value: 0,
						color: '#FF5D3D',
						background: '#FFF2F0',
					}, {
						name: '合格',
						value: 0,
						color: '#2DE0A8',
						background: '#EFFDF8',
					}]
				},
				resultActiveData: {
					jckjg: '基本符合',
					cljg: '责令改正',
					zgwcqx: '2023年8月28日',
					qtxyjldwt: '暂无'
				}
			}
		},
		filters: {
			resultFilter(value) {
				if (value == '1') {
					return '通过检查';
				} else if (value == '2') {
					return '责令整改';
				} else if (value == '3') {
					return '调查处理';
				} else {
					return '';
				}
			},
			manageStatusFilter(value) {
				if (value == '0') {
					return '正常';
				} else if (value == '1') {
					return '异常';
				} else {
					return '';
				}

			}

		},
		onLoad(options) {
			const  that = this;
			this.resultActiveId = options.checkId
			this.initData();
			this.popHeight = uni.getSystemInfoSync().screenHeight/3 * 2;
	
		},
		created() {

		},
		computed: {
			reversedData() {
				return this.chartOptions.data.slice().reverse();
			},
		},
		mounted() {},
		methods: {
			goBack() {
				uni.navigateBack();
			},
			async initData() {
				const that = this;
				//初始化页面数据
				uni.showLoading({
					title: '获取页面信息中...',
					mask: true
				})
				const res = await uni.$api.getSchemeResultInfo({
					'checkId': this.resultActiveId
				});
				uni.hideLoading();
				if (res.data.code == 0) {
					this.inspectionData = res.data.data
					this.$set(this.chartOptions, 'data', [{
						name: '合理缺项',
						value: res.data.data.checkInfo.ECHARTS_MISSING_ITEM,
						color: '#4C87FE',
						background: '#F1F6FF',
					}, {
						name: '不合格',
						value: res.data.data.checkInfo.ECHARTS_NOQUALIFIED,
						color: '#FF5D3D',
						background: '#FFF2F0',
					}, {
						name: '合格',
						value: res.data.data.checkInfo.ECHARTS_QUALIFIED,
						color: '#2DE0A8',
						background: '#EFFDF8',
					}])
					setTimeout(function(){
						that.tabIndex = 0;
					},100)
				} else {
					uni.showToast({
						title: '数据获取失败'
					})
				}
			},
			stepActive(index) {
				this.tabIndex = index

			},
			async standardListActive(id,standardNumber,standardName) { 
				//显示详细项详情
				uni.showLoading({
					title:'获取详细信息',
					mask: true
				})
				this.standardName = standardName;
				this.standardNumber = standardNumber;
				const res = await uni.$api.getSchemeContentList({
					'standardId': id
				});
				uni.hideLoading()
				this.contentList = res.data.data
				this.$refs.standardListActive.open('bottom')
			},
			closeReturn() {
				this.$refs.standardListActive.close('bottom')
			} ,
			lookPhoto(url){
				Vue.prototype.$previewImage(url);   
			}
		},
		watch: {

		},
	}
</script>

<style lang="scss">
	.top-upper {
		position: fixed;
		z-index: 1;
		top: 0;
		left: 0;
		width: 100%;

		.title {
			background: url('../../static/img/inspectBg.png');
			background-size: cover;
			width: 100%;
			height: 115rpx;
			line-height: 115rpx;
			position: relative;
			display: flex;
			justify-content: center;

			.arrow {
				position: absolute;
				left: 33rpx;
				top: 50%;
				transform: translate(0%, -50%);
				width: 100rpx;
				height: 100rpx;

				&::before {
					display: block;
					content: "";
					position: absolute;
					top: 50%;
					left: 0%;
					width: 20rpx;
					height: 20rpx;
					border-left: 1px solid #fff;
					border-top: 1px solid #fff;
					transform: translate(0%, -50%) rotate(-45deg);
				}
			}

			text {
				font-size: 30rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				letter-spacing: 1px;
			}

			.screen {
				position: absolute;
				right: 30rpx;
				top: 50%;
				transform: translate(0%, -50%);
				width: 35rpx;
				height: 33rpx;
			}
		}

		.step {
			display: flex;
			justify-content: space-around;
			height: 80rpx;
			line-height: 80rpx;
			background: #F9F9F9;

			view {
				position: relative;
				font-size: 25rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;

				&.active {
					color: #0552A9;

					&::before {
						display: block;
						content: "";
						position: absolute;
						left: 50%;
						bottom: 0%;
						transform: translate(-50%, 0%);
						width: 100rpx;
						height: 5rpx;
						background: #0552A9;
					}
				}
			}
		}
	}

	.resultActiveContent {
		background: #F9F9F9;
		height: calc(100vh - 195rpx);

		.centre {
			margin: 195rpx 0 0 0;
			// padding: 0 17.5rpx;
			height: calc(100vh - 280rpx);
			overflow-x: hidden;

			>view {
				background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 100%);
				box-shadow: 0rpx 8rpx 15rpx 0rpx rgba(0, 0, 0, 0.05);
				margin: 0 auto 12.5rpx;

				.title {
					height: 73rpx;
					line-height: 73rpx;
					background: #E1EAF4;
					display: flex;
					align-items: center;
					justify-content: space-between;
					text-indent: 50rpx;
					font-size: 24rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #002B5B;

					.right {
						margin: 0 68rpx 0 0;
						font-size: 15rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #666666;
					}
				}

				.box {
					padding: 25rpx 50rpx;

					.text {
						font-size: 19rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #333333;
						margin: 0 auto 13rpx;
						display: flex;

						text {
							color: #666666;
						}

						uni-navigator {
							display: flex;
							align-items: center;
							color: #0552A9;

							.arrow {
								width: 15rpx;
								height: 15rpx;
								border-top: 1rpx solid #0552A9;
								border-right: 1rpx solid #0552A9;
								transform: rotate(45deg);
								margin: 0 0 0 6rpx;
							}
						}
					}
				}

				&.one {

					.content {
						display: flex;
						justify-content: flex-start;

						.echart {
							display: flex;
							justify-content: space-around;
							width: 215rpx;
							height: 215rpx;
							position: relative;
							padding: 25rpx 50rpx 50rpx 50rpx;

							.top {
								position: absolute;
								top: 50%;
								left: 50%;
								transform: translate(-50%, -50%);

								.EchartsCake {
									width: 215rpx;
									height: 215rpx;
								}
							}

							.bottom {
								position: absolute;
								bottom: 20rpx;
								display: flex;
								align-items: center;

								.list {
									display: flex;
									align-items: center;

									.drop {
										width: 9rpx;
										height: 9rpx;
										border-radius: 50%;
										margin: 0 6.5rpx 0 0;
									}

									text {
										font-size: 9rpx;
										font-family: PingFangSC-Regular, PingFang SC;
										font-weight: 400;
										color: #666666;
									}

									&,
									.list {
										margin: 0 0 0 13.5rpx;
									}
								}
							}
						}

						.ol {
							display: flex;
							flex-direction: column;
							justify-content: space-evenly;
							margin: 0 0 0 20rpx;

							.li {
								width: 359rpx;
								height: 64rpx;
								line-height: 64rpx;
								background: #2DE0A8;
								border-radius: 4rpx;
								display: flex;
								align-items: center;

								.drop {
									width: 16rpx;
									height: 16rpx;
									border-radius: 50%;
									margin: 24rpx 18rpx 24rpx 24rpx;
								}

								text {
									font-size: 24rpx;
									font-family: PingFangSC-Regular, PingFang SC;
									font-weight: 400;
									color: #333333;
								}
							}
						}
					}
				}

				&.two {

					.box {

						.text {

							text {
								color: #666666;
							}
						}
					}
				}
				
				&.three {
					
					.box {
					
						.text {
					
							text {
								width: 200rpx;
							}
						}
					}
				}
			}
		}
	}

	.images {
		width: 150px;
		height: 150px;
		border-radius: 6px;
		border: 1px solid #f0f0f0;
	}

	.resultBaseContent {
		background: #F9F9F9;
		height: calc(100vh - 195rpx);

		.centre {
			margin: 195rpx 0 0 0;
			// padding: 0 17.5rpx;
			height: calc(100vh - 280rpx);
			overflow-x: hidden;

			>view {
				background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 100%);
				margin: 0 auto 12.5rpx;

				.title {
					height: 73rpx;
					line-height: 73rpx;
					background: #E1EAF4;
					display: flex;
					text-indent: 50rpx;
					font-size: 24rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #002B5B;
				}

				.box {
					padding: 25rpx 50rpx;
					width: 600rpx;
					display: flex;
					flex-direction: column;
					justify-content: flex-start;
					align-items: flex-start;

					.text {
						font-size: 19rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #333333;
						margin: 0 auto 13rpx;
						display: flex;
						flex-direction: row;
						width: 600rpx;

						.li {
							display: flex;
							align-items: center;
							justify-content: space-between;
							height: 68rpx;
							line-height: 68rpx;
							font-size: 21rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #333333;

							.no {
								width: 26rpx;
								height: 26rpx;
								line-height: 26rpx;
								text-align: center;
								background: #FF3B36;
								border-radius: 50%;
								font-size: 21rpx;
								font-family: PingFangSC-Medium, PingFang SC;
								font-weight: 500;
								color: #FFFFFF;
							}

							.yes {
								width: 26rpx;
								height: 26rpx;
							}

							&:nth-child(even) {
								background: #F9F9F9;
							}
						}
					}
				}
			}
			
			.three {
				
				.box {
					
					.text {
						
						text {
							width: 100rpx;
						}
					}
				}
			}
		}
	}

	.resultFoundationContent {
		background: #F9F9F9;
		height: calc(100vh - 195rpx);

		.upper {
			position: fixed;
			z-index: 1;
			top: 0;
			left: 0;
			width: 100%;

			.title {
				background: url('../../static/img/inspectBg.png');
				background-size: cover;
				width: 100%;
				height: 115rpx;
				line-height: 115rpx;
				position: relative;
				display: flex;
				justify-content: center;

				.arrow {
					position: absolute;
					left: 33rpx;
					top: 50%;
					transform: translate(0%, -50%);
					width: 100rpx;
					height: 100rpx;

					&::before {
						display: block;
						content: "";
						position: absolute;
						top: 50%;
						left: 0%;
						width: 20rpx;
						height: 20rpx;
						border-left: 1px solid #fff;
						border-top: 1px solid #fff;
						transform: translate(0%, -50%) rotate(-45deg);
					}
				}

				text {
					font-size: 30rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
					letter-spacing: 1px;
				}

				.screen {
					position: absolute;
					right: 30rpx;
					top: 50%;
					transform: translate(0%, -50%);
					width: 35rpx;
					height: 33rpx;
				}
			}

			.step {
				display: flex;
				justify-content: space-around;
				height: 80rpx;
				line-height: 80rpx;
				background: #F9F9F9;

				view {
					position: relative;
					font-size: 25rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;

					&.active {
						color: #0552A9;

						&::before {
							display: block;
							content: "";
							position: absolute;
							left: 50%;
							bottom: 0%;
							transform: translate(-50%, 0%);
							width: 100rpx;
							height: 5rpx;
							background: #0552A9;
						}
					}
				}
			}
		}

		.centre {
			margin: 195rpx 0 0 0;
			// padding: 0 17.5rpx;
			height: calc(100vh - 280rpx);
			overflow-x: hidden;

			>view {
				background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 100%);
				margin: 0 auto 12.5rpx;

				.title {
					height: 73rpx;
					line-height: 73rpx;
					background: #E1EAF4;
					display: flex;
					text-indent: 50rpx;
					font-size: 24rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #002B5B;
				}

				.box {
					// padding: 25rpx 50rpx;
					padding: 25rpx 0rpx;

					.text {
						font-size: 19rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #333333;
						margin: 0 auto 13rpx;
						display: flex;
						flex-direction: column;

						.li {
							display: flex;
							align-items: center;
							justify-content: space-between;
							height: 68rpx;
							line-height: 68rpx;
							font-size: 21rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #333333;
							padding: 0 50rpx;

							.no {
								width: 26rpx;
								height: 26rpx;
								line-height: 26rpx;
								text-align: center;
								background: #FF3B36;
								border-radius: 50%;
								font-size: 21rpx;
								font-family: PingFangSC-Medium, PingFang SC;
								font-weight: 500;
								color: #FFFFFF;
							}

							.yes {
								width: 26rpx;
								height: 26rpx;
							}

							&:nth-child(even) {
								background: #F9F9F9;
							}
						}
					}
				}
			}
		}
	}
	
	.standardListActiveContent,
	.photoActiveContent {
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 0 0;
		.title {
			width: 100%;
			height: 80rpx;
			line-height: 80rpx;
			background: url('../../static/img/popupTitle.png') no-repeat center center;
			background-size: cover;
			font-size: 25rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			// text-indent: 45rpx;
			text-align: center;
		}
		
		.box {
			margin: 0 0 100rpx 0;
			overflow-y: auto;			
			
			.dl {
				
				.dt{
					border-bottom: 2rpx solid #d6d6d6;
					text-align: center;
					font-size: 26rpx;
					padding: 16rpx 0;
				}
				
				.dd {
					border-bottom: 2rpx solid #d6d6d6;
					
					.top {
						display: flex;
						justify-content: space-between;
						font-size: 20rpx;
						padding: 10rpx 0;
						
						.left {
							width: 70%;
							padding: 20rpx 0;
							display: flex;
							
							.number {
								font-size: 20rpx;
								margin: 0 30rpx 0 20rpx;
							}
							
							.text {
							
							}
						}
						
						.state {
							width: 15%;
							color: #fff;
							display: flex;
							align-items: center;
							justify-content: flex-start;
							padding: 0 20rpx;
							
							image {
								width: 20rpx;
								height: 20rpx;
								margin: 0 10rpx 0 0;
							}

							&.yes {
								background: #5DB98C;
								
							}
							
							&.yesS{
								background: #F9A23F;
							}
							
							&.no {
								background: #F95E5A;
							}
						}
					}
					
					.illustrate {
						display: flex;
						font-size: 20rpx;
						margin: 0 0 20rpx 0;
						
						text {
							font-size: 20rpx;
							margin: 0 30rpx 0 20rpx;
						}
					}
					
					.photo {
						display: flex;
						font-size: 20rpx;
						margin: 0 0 20rpx 0;
						
						text {
							font-size: 20rpx;
							margin: 0 30rpx 0 20rpx;
						}
						
						.text {
							color: #026DC6;
						}
					} 
				}
			}
		}
		
		.closeReturn {
			width: 80%;
			margin: 0 auto;
			height: 55rpx;
			line-height: 55rpx;
			background: #0552A9;
			border-radius: 10rpx;
			font-size: 20rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #fff;
			text-align: center;
			position: relative;
			top: -30rpx;
		}
	}
	
	.photoActiveContent {
		
		.box {
			
			image {
				display: block;
				margin: 50rpx auto 0;
			}
		}
	}
</style>